<script setup lang="ts">
  import { ref, reactive, watch, computed } from 'vue';
  import { TableRowSelection, Notification } from '@arco-design/web-vue';
  import { useBooleanStore } from '@/store';
  import { getUserJob } from '@/utils/auth';
  import { getToolCode } from '@/api/sorting-matching';

  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  const showDrawer = ref<boolean>(false);

  const columns: any[] = [
    {
      title: '托盘号',
      dataIndex: 'toolCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '托盘状态',
      dataIndex: 'palletStatus',
    },
    {
      title: '是否参与分拣',
      dataIndex: 'isSortName',
    },
    {
      title: '任务状态',
      dataIndex: 'taskStatus',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: '工作包',
      dataIndex: 'packageCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
    {
      title: 'AO号',
      dataIndex: 'aoCode',
      sortable: {
        sortDirections: ['ascend', 'descend'],
      },
    },
  ];

  const rowSelection: TableRowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const selectedKeys = ref<any>([]);

  // 数据库一共有多少条
  const total = ref<number>(0);
  const pageNumber = ref<number>(1);
  const pageSize = ref<number>(10);

  // 托盘列表
  const toolList = ref<any[]>([]);
  // 获取托盘数据
  async function getTool() {
    const data = await getToolCode(booleanStore.sortingList[0]);
    toolList.value = data.responseBody;
  }

  // 监听弹框
  watch(
    () => booleanStore.boolValue,
    (newValue: boolean) => {
      if (booleanStore.num === 5) {
        showDrawer.value = newValue;
        getTool();
        selectedKeys.value = [];
      }
    }
  );

  // async function replaceToolCode() {}

  // async function replaceToolByHandle() {}

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool(5);
    }
  }

  // 关闭弹框
  function handleCancel() {
    booleanStore.toggleBool(5);
  }

  function change(e: any) {
    pageNumber.value = e;
  }
  function changeSize(e: any) {
    pageSize.value = e;
  }
  watch([pageNumber, pageSize], () => {
    getTool();
  });
</script>

<template>
  <a-drawer
    width="70%"
    :height="340"
    :visible="showDrawer"
    placement="right"
    :footer="false"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
  >
    <template #title> 更改托盘</template>

    <a-card :header-style="hStyle" :bordered="false">
      <div>
        <!-- <a-button type="primary" size="large" @click="replaceToolCode"
          >更换托盘</a-button
        >
        <a-button type="primary" size="large" @click="replaceToolByHandle"
          >执行任务</a-button
        > -->
      </div>

      <a-table
        v-model:selectedKeys="selectedKeys"
        :stripe="true"
        class="top-table"
        :pagination="false"
        row-key="toolCode"
        :columns="columns"
        :data="toolList"
        :row-selection="rowSelection"
      >
      </a-table>
      <div class="page-position">
        <a-pagination
          :total="total"
          :current="pageNumber"
          :page-size="pageSize"
          show-total
          show-jumper
          show-page-size
          @change="change"
          @update:page-size="changeSize"
        />
      </div>
    </a-card>
  </a-drawer>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .row-top {
    margin-top: 10px;
  }
  .btn-reset {
    margin-left: 10px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .page-position {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
